<template>
  <div>
    <!-- <div class="toptitle">组织编码</div> -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="店员姓名" style="margin-left: 10px">
        <br />
        <br />
        <el-input
          v-model="formInline.realName"
          clearable
          style="margin-left: -70px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <br />
        <br />
        <el-input
          v-model="formInline.tel"
          clearable
          style="margin-left: -60px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号码">
        <br />
        <br />
        <el-input
          v-model="formInline.idCard"
          clearable
          style="margin-left: -80px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="店员编号">
        <br />
        <br />
        <el-input
          v-model="formInline.employeeNo"
          clearable
          style="margin-left: -70px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="工作年限">
        <br />
        <br />
        <el-input
          v-model.number="formInline.workYear"
          clearable
          style="margin-left: -70px; width: 200px"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="所属专卖店" v-show="userType">
        <br />
        <br />
        <el-input
          v-model="formInline.storeName"
          clearable
          style="margin-left: -70px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺编码">
        <br />
        <br />
        <el-input
          v-model="formInline.authCode"
          clearable
          style="margin-left: -70px; width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="店员职务">
        <br />
        <br />
        <el-select
          v-model="formInline.userTypeQQ"
          clearable
          style="margin-left: -70px; width: 200px"
        >
          <!-- <el-option label="店主" :value="4"></el-option> -->
          <el-option label="店长" :value="5"></el-option>
          <el-option label="店员" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店员学历">
        <br />
        <br />
        <el-select
          v-model="formInline.academic"
          clearable
          style="margin-left: -70px; width: 200px"
        >
          <el-option label="高中以下" :value="0"></el-option>
          <el-option label="大专" :value="1"></el-option>
          <el-option label="本科" :value="2"></el-option>
          <el-option label="硕士" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否专职">
        <br />
        <br />
        <el-select
          v-model="formInline.isFullTime"
          clearable
          style="margin-left: -70px; width: 200px"
        >
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
          <el-option label="全部" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="userInfo.userType != '3'" label="所属大区" v-show="userType && userType2">
        <br />
        <br />
        <el-select
          v-model="formInline.zqName"
          clearable
          filterable
          @change="selCore(formInline.zqName)"
          style="margin-left: -70px; width: 200px"
        >
          <el-option
            v-for="item in corpList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item
        v-if="userInfo.userType != '3'"
        label="所属营销区域"
        v-show="userType"
        style="margin-left: 10px"
      >
        <br />
        <br />
        <el-select
          v-model="formInline.jdName"
          clearable
          filterable
          @change="selbase(formInline.jdName)"
          style="margin-left: -70px; width: 200px"
        >
          <el-option
            v-for="item in RentalPayWay"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="信息是否完整">
        <br />
        <br />
        <el-select
          v-model="formInline.isInfoComplete"
          clearable
          style="margin-left: -90px; width: 200px"
        >
          <!-- <el-option label="店主" :value="4"></el-option> -->
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <br />
        <br />
        <el-select
          v-model="formInline.status"
          clearable
          style="margin-left: -50px; width: 200px"
        >
          <!-- <el-option label="店主" :value="4"></el-option> -->
          <el-option label="启用" :value="1"></el-option>
          <el-option label="停用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上岗日期">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.dateRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          style="margin-left: -70px; width: 410px"
          start-placeholder="上岗开始日期"
          end-placeholder="上岗结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item style="margin-left: 850px; text-align: right">
        <el-button
          type="primary"
          @click="search()"
          size="mini"
          icon="el-icon-search"
          :disabled="dindanflagone"
          >查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="creatoneOrg()"
          size="mini"
          icon="el-icon-plus"
          >新增</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="showConfigTableDialog()"
          size="mini"
          icon="el-icon-setting"
          :loading="insertLoading"
          >列表配置</el-button
        >
      </el-form-item>
      <el-button
        type="success"
        @click="exportExcel()"
        size="mini"
        icon="el-icon-s-data"
        >导出</el-button
      >
    </el-form>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      style="width: 100%; margin-bottom: 20px"
      row-key="goodsTypeId"
      border
      v-loading="loading"
      default-expand-all
      @sort-change="handleSort"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :width="dropCol[index].width"
        :min-width="200"
        :label="item.label"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <div v-if="dropCol[index].prop === 'sex'">
            {{ scope.row.sex === 0 ? '女' : '男' }}
          </div>
          <div v-if="dropCol[index].prop === 'userType'">
            <span v-if="scope.row.userType == 4">店主</span>
            <span v-if="scope.row.userType == 5">店长</span>
            <span v-if="scope.row.userType == 6">店员</span>
          </div>
          <div v-if="dropCol[index].prop === 'academic'">
            <span v-if="scope.row.academic == 0">高中以下</span>
            <span v-if="scope.row.academic == 1">大专</span>
            <span v-if="scope.row.academic == 2">本科</span>
            <span v-if="scope.row.academic == 3">硕士</span>
          </div>
          <div v-if="dropCol[index].prop === 'headPicUrl'">
            <img
              :src="scope.row.headPicUrl"
              v-if="scope.row.headPicUrl != '' && scope.row.headPicUrl != null"
              width="70"
              height="50"
            />
          </div>
          <div v-if="dropCol[index].prop === 'status'">
            {{ scope.row.status === 0 ? '停用' : '启用' }}
          </div>
          <div v-if="dropCol[index].prop === 'isInfoComplete'">
            {{ scope.row.isInfoComplete === 0 ? '否' : '是' }}
          </div>
          <div v-if="dropCol[index].prop === 'isFullTime'">
            {{ scope.row.isFullTime === 0 ? '否' : '是' }}
          </div>
          <div
            v-if="
              dropCol[index].prop != 'sex' &&
                dropCol[index].prop != 'headPicUrl' &&
                dropCol[index].prop != 'status' &&
                dropCol[index].prop != 'userType' &&
                dropCol[index].prop != 'academic' &&
                dropCol[index].prop != 'isInfoComplete' &&
                dropCol[index].prop != 'isFullTime'
            "
          >
            {{ scope.row[dropCol[index].prop] }}
          </div>
        </template>
      </el-table-column>
      <!--
            <el-table-column prop="realName" label="店员姓名" width="180"></el-table-column>

            <el-table-column prop="tel" label="手机号" align="center" width="150"></el-table-column>
            <el-table-column prop="idCard" label="身份证号码" align="center" width="150"></el-table-column>
            <el-table-column align="center" prop="headPicUrl" label="头像" width="150">
                <template slot-scope="scope">
                    <img
                        :src="scope.row.headPicUrl"
                        v-if="scope.row.headPicUrl != '' && scope.row.headPicUrl != null"
                        width="70"
                        height="50"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    {{
                    scope.row.status === 0 ? "停用" : "启用"
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="memberCount" label="绑定会员数" align="right"></el-table-column>
            <el-table-column prop="saleAmount" label="销售额" align="right"></el-table-column>
            <el-table-column prop="zqName" label="所属大区" align="center" width="140"></el-table-column>
            <el-table-column prop="jdName" label="所属营销区域" align="center"></el-table-column>
            <el-table-column prop="storeName" label="所属专卖店" align="center" width="130"></el-table-column>

            <el-table-column prop="createTime" label="创建时间" align="center" width="200"></el-table-column>
            -->
      <!-- <el-table-column label="操作" width="280" align="center" fixed="right">
            <template slot-scope="scope">-->
      <!-- <el-button
            type="text"
            v-if="scope.row.status == 1"
            @click="updateStatus(scope.row.goodsTypeId,0)"
          >停用</el-button>
          <el-button
            type="text"
            v-if="scope.row.status == 0"
            @click="updateStatus(scope.row.goodsTypeId,1)"
            >启用</el-button>
        </template>
            </el-table-column>
            -->
      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userType == 6"
            type="text"
            size="mini"
            @click="updateStatus(scope.row)"
          >
            {{ scope.row.status == 1 ? '停用' : '启用' }}
          </el-button>
          <el-button type="text" size="mini" @click="changeorg(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.userType == 6"
            type="text"
            size="mini"
            @click="handledelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px"></el-form-item>
    </el-form>
    <div class="block" style="margin-top: -49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :disabled="dindanflag"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 修改店员信息 -->
    <el-dialog title="信息" :visible.sync="dialogVisibleorg" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
      >
        <el-form-item label="店员姓名" prop="realName">
          <el-input v-model="ruleForm.realName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="onboardDate" label="上岗日期">
          <el-date-picker
            placeholder="选择日期"
            v-model="ruleForm.onboardDate"
            style="width: 70%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="academic">
          <el-select v-model="ruleForm.academic">
            <el-option label="高中以下" :value="0"></el-option>
            <el-option label="大专" :value="1"></el-option>
            <el-option label="本科" :value="2"></el-option>
            <el-option label="硕士" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否专职" prop="isFullTime">
          <el-select v-model="ruleForm.isFullTime">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工作年限" prop="workYear">
          <el-input
            v-model="ruleForm.workYear"
            type="number"
            style="width: 200px"
            min="0"
          ></el-input>
          <span>年</span>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input
            v-model="ruleForm.idCard"
            placeholder="身份证号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" v-if="!isOwner">
          <el-select v-model="ruleForm.status">
            <el-option label="停用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="职位变更" v-if="!isOwner && isStop">
          <el-radio-group v-model="ruleForm.userType" @change="jobChange">
            <el-radio label="5">店长</el-radio>
            <el-radio label="6">店员</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="店员照片:" prop="headPicUrl">
          <el-row>
            <el-col style="margin: 10px;">
              <el-upload
                style="margin: 10px"
                :action="action"
                list-type="picture-card"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-success="upLoadPicone"
                :on-change="handleImgChangeone"
                :file-list="imgListone"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmEditone()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top: 10px"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin: 15px 10px; width: 120px"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center; margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import {
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import { getAllZone, getAllBase, getAllShop } from '@/api/addShopapply.js';
import {
  //   queryGoodsTypeList,
  //   addGoodsType,
  //   addLowerGoodsType,
  //   deleteGoodsType,
  //   updaterole,
  //   getUserOrgType
  queryStoreUserInfo,
  editClerk,
} from '@/api/shopMemberset';
import { queryStoreUserExcel } from '@/api/download';
import qs from 'qs';
export default {
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
      dindanflag: false,
      dindanflagone: false,
      userType: false,
      userType2: false,
      corpList: [], //商户列表
      RentalPayWay: [], //商户列表
      Renarr: [],
      CurrentNode: null,
      CurrentNodeResolve: null,
      RootNode: {
        id: '000',
        Name: '根目录',
        Path: '',
      },
      headers: {
        token: localStorage.getItem('token'), //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      tableData: [],
      txtVal: '',
      picUrl: '',
      loading: true,
      dialogVisibleorg: false,
      dialogVisibleorgone: false,
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'shopMemberset',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      imgListone: [],
      imgListtwo: [],
      ruleForm: {
        orgSeq: '',
        realName: '',
        onboardDate: '',
        sex: '',
        academic: '',
        isFullTime: '',
        workYear: '',
        tel: '',
        status: '1',
        headPicUrl: '',
        idCard: '',
        userType: '6',
      },
      authCode: '',
      orgSeqxia: '',
      total: 0,
      options: [],
      optionsone: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      orgSeq: '',
      flagorg: false,
      dialogVisible: false,
      dialogVisibleImg: false,
      dialogImageUrl: '',
      allCol: [],
      col: [],
      dropCol: [],
      formInline: {
        sortList: [],
        userType: '',
        realName: '',
        tel: '',
        status: '',
        zqName: '',
        jdName: '',
        storeName: '',
        authCode: '',
        isInfoComplete: '',
        dateRange: [],
        upOrgSeq: '',
        idCard: '',
        employeeNo: '',
        workYear: '',
        userTypeQQ: '',
        academic: '',
        isFullTime: '',
      },
      orgList: [],
      userId: '',
      rules: {
        realName: [
          {
            required: true,
            message: '请输入店员姓名',
            trigger: 'blur',
          },
        ],
        onboardDate: [
          {
            required: true,
            message: '请输入上岗日期',
            trigger: 'blur',
          },
        ],
        workYear: [
          {
            required: true,
            message: '请输入工作年限',
            trigger: 'blur',
          },
        ],
        isFullTime: [
          {
            required: true,
            message: '请选择是否专职',
            trigger: 'blur',
          },
        ],
        academic: [
          {
            required: true,
            message: '请选择学历',
            trigger: 'blur',
          },
        ],
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'blur',
          },
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0123456789])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号码',
            trigger: 'blur',
          },

          {
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
        headPicUrl: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'blur',
          },
        ],
      },

      // 是否是停用状态
      isStop: false,

      // 是否是店主
      isOwner: false,

      userInfo: {},
    };
  },
  mounted() {
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    this.logininfo = localStorage.getItem('logininfo');
    this.userInfo = JSON.parse(this.logininfo);

    this.orgList = JSON.parse(this.logininfo).orgList;
    this.orgSeq = this.orgList[0].orgSeq || JSON.parse(this.logininfo).orgSeq;
    this.orgSeqxia =
      this.orgList[0].orgSeq || JSON.parse(this.logininfo).orgSeq;
    this.formInline.userType = JSON.parse(this.logininfo).userType;
    this.userType =
      this.formInline.userType !== '4' && this.formInline.userType !== '5';
    this.userType2 = this.formInline.userType == '2' ? false : true;
    if (this.userType2 == false) {
      this.selCore(this.orgSeq);
    }
    this.rolemanageone();
    this._getAllZone();

    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    _getAllZone() {
      let data = {};
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },
    selCore(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
        let data = {
          code: value,
        };
        getAllBase(data).then((res) => {
          this.RentalPayWay = res.result;
          this.formInline.jdName = '';
        });
      } else if (this.formInline.jdName != '') {
        this.orgSeq = this.formInline.jdName;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
    },
    selbase(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
      } else if (this.formInline.zqName != '') {
        this.orgSeq = this.formInline.zqName;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
    },
    kong() {
      this.formInline.sortList = [];
      this.formInline.realName = '';
      this.formInline.tel = '';
      this.formInline.zqName = '';
      this.formInline.jdName = '';
      this.formInline.storeName = '';
      this.formInline.authCode = '';
      this.formInline.isInfoComplete = '';
      this.formInline.status = '';
      this.formInline.idCard = '';
      this.formInline.employeeNo = '';
      this.formInline.workYear = '';
      this.formInline.userTypeQQ = '';
      this.formInline.academic = '';
      this.formInline.dateRange = [];
      this.formInline.isFullTime = '';
    },
    creatoneOrg() {
      this.dialogVisibleorg = !this.dialogVisibleorg;

      this.ruleForm = this.$options.data().ruleForm;
      this.imgListone = [];

      this.flagorg = true;
    },
    changeorg(v) {
      (this.ruleForm.realName = v.realName),
        (this.ruleForm.tel = v.tel),
        (this.ruleForm.status = String(v.status)),
        (this.ruleForm.headPicUrl = v.headPicUrl);
      this.isStop = String(v.status) == '1' ? true : false;
      this.ruleForm.idCard = v.idCard;
      this.ruleForm.userType = v.userType;
      this.ruleForm.sex = v.sex;
      this.ruleForm.academic = v.academic;
      this.ruleForm.isFullTime = v.isFullTime;
      this.ruleForm.workYear = v.workYear;
      this.ruleForm.onboardDate = v.onboardDate;
      this.ruleForm.orgSeq = v.orgSeq;
      this.userId = v.userId;
      this.authCode = v.authCode;
      this.flagorg = false;
      var headPicUrl = v.headPicUrl;

      this.dialogVisibleorg = !this.dialogVisibleorg;

      this.isOwner = v.userType == '5' ? true : false;

      this.imgListone = [];
      if (v.headPicUrl != '' && v.headPicUrl != null) {
        let data = {
          name: '',
          url: v.headPicUrl,
        };
        this.imgListone.push(data);
      }
    },
    exportExcel() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sortList: this.formInline.sortList,
          realName: this.formInline.realName,
          status: this.formInline.status,
          orgSeq: this.orgSeq == null ? this.orgSeqxia : this.orgSeq,
          tel: this.formInline.tel,
          zqName: this.formInline.zqName,
          jdName: this.formInline.jdName,
          storeName: this.formInline.storeName,
          authCode: this.formInline.authCode,
          isInfoComplete: this.formInline.isInfoComplete,
          onboardDateStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          onboardDateEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          idCard: this.formInline.idCard,
          employeeNo: this.formInline.employeeNo,
          workYear: this.formInline.workYear,
          userType: this.formInline.userTypeQQ,
          academic: this.formInline.academic,
        },
      };
      queryStoreUserExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '店员列表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    updateStatus(row) {
      this.$confirm(
        `确定${row.status == 1 ? '停用' : '启用'}该账号：${row.realName}吗？`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        editClerk({
          ...row,
          status: row.status == 1 ? 0 : 1,
        }).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success',
            });
            this.rolemanageone();
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      });
    },

    confirmEditone() {
      if (this.ruleForm.realName == '' || this.ruleForm.realName == null) {
        this.$message.error('请输入店员姓名');
        return;
      }
      if (
        this.ruleForm.onboardDate == '' ||
        this.ruleForm.onboardDate == null
      ) {
        this.$message.error('请输入上岗日期');
        return;
      }

      if (this.ruleForm.sex === '' || this.ruleForm.sex === null) {
        this.$message.error('请选择性别');
        return;
      }

      if (this.ruleForm.academic === '' || this.ruleForm.academic === null) {
        this.$message.error('请选择学历');
        return;
      }
      if (
        this.ruleForm.isFullTime === '' ||
        this.ruleForm.isFullTime === null
      ) {
        this.$message.error('请选择是否专职');
        return;
      }

      if (this.ruleForm.workYear == '' || this.ruleForm.workYear == null) {
        this.$message.error('请输入工作年限');
        return;
      }
      if (this.ruleForm.tel == '' || this.ruleForm.tel == null) {
        this.$message.error('请输入手机号');
        return;
      } else {
        if (
          !/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[0123456789])\d{8}$/.test(
            this.ruleForm.tel
          )
        ) {
          this.$message.error('请输入正确的手机号');
          return;
        }
      }
      if (this.ruleForm.idCard == '' || this.ruleForm.idCard == null) {
        this.$message.error('请输入身份证号');
        return;
      } else {
        if (
          !/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
            this.ruleForm.idCard
          )
        ) {
          this.$message.error('请输入正确的身份证号');
          return;
        }
      }

      if (this.ruleForm.headPicUrl == '' || this.ruleForm.headPicUrl == null) {
        this.$message.error('请上传图片');
        return;
      }

      if (this.flagorg == false) {
        let data = {
          ...this.ruleForm,
          authCode: this.authCode,
          userId: this.userId,
        };
        console.log('ioippp');

        editClerk(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success',
            });
            this.dialogVisibleorg = !this.dialogVisibleorg;
            this.rolemanageone();
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      } else if (this.flagorg == true) {
        let data = {
          ...this.ruleForm,
          orgSeq: this.orgSeq,
        };
        editClerk(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
            this.dialogVisibleorg = !this.dialogVisibleorg;
            this.rolemanageone();
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      }
    },

    search() {
      this.dindanflagone = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sortList: this.formInline.sortList,
          realName: this.formInline.realName,
          status: this.formInline.status,
          orgSeq: this.orgSeq == null ? this.orgSeqxia : this.orgSeq,
          onboardDateStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          onboardDateEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          tel: this.formInline.tel,
          zqName: this.formInline.zqName,
          jdName: this.formInline.jdName,
          storeName: this.formInline.storeName,
          authCode: this.formInline.authCode,
          isInfoComplete: this.formInline.isInfoComplete,
          idCard: this.formInline.idCard,
          employeeNo: this.formInline.employeeNo,
          workYear: this.formInline.workYear,
          userType: this.formInline.userTypeQQ,
          academic: this.formInline.academic,
          isFullTime:
            this.formInline.isFullTime == 2 ? '' : this.formInline.isFullTime,
        },
      };
      queryStoreUserInfo(data).then((res) => {
        this.dindanflagone = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    handledelete(v) {
      let data = {
        ...v,
        status: 2,
      };
      this.$confirm('确认删除吗？').then((_) => {
        editClerk(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success',
            });

            this.rolemanageone();
          } else {
            this.$message({
              showClose: true,
              message: '删除失败',
              type: 'error',
            });
          }
        });
      });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.rolemanageone();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.dindanflag = true;
      this.rolemanageone();
    },

    rolemanageone() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sortList: this.formInline.sortList,
          realName: this.formInline.realName,
          //   status: this.formInline.status,
          orgSeq: this.orgSeq,
          tel: this.formInline.tel,
          zqName: this.formInline.zqName,
          jdName: this.formInline.jdName,
          storeName: this.formInline.storeName,
          authCode: this.formInline.authCode,
          isInfoComplete: this.formInline.isInfoComplete,
          idCard: this.formInline.idCard,
          onboardDateStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          onboardDateEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          employeeNo: this.formInline.employeeNo,
          workYear: this.formInline.workYear,
          userType: this.formInline.userTypeQQ,
          academic: this.formInline.academic,
        },
      };
      queryStoreUserInfo(data).then((res) => {
        this.loading = false;
        this.dindanflag = false;
        this.total = res.total;
        this.tableData = res.records;
        console.log(this.tableData, 'ppe');
      });
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.$seeImage({
        currentTarget: {
          currentSrc: file.url,
        },
      });
      this.dialogVisibleImg = true;
    },
    upLoadPicone(file, fileList) {
      this.imgListone = [];
      this.ruleForm.headPicUrl = file.result;
    },
    handleImgChangeone(file, fileList) {
      if (file.response) {
        this.imgListone.push({
          url: file.response.result,
          status: 'finished',
        });
      }
    },

    handleImgChangetwo(file, fileList) {
      if (file.response) {
        this.imgListtwo.push({
          url: file.response.result,
          status: 'finished',
        });
      }
    },

    handleExceed(file, fileList6) {
      this.$message.error(`图片最多上传1张`);
    },
    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({
              label: item.fieldName,
              prop: item.fieldCode,
            });
            this.dropCol.push({
              label: item.fieldName,
              prop: item.fieldCode,
            });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'memberCount') {
            this.$set(item, 'sortable', 'memberCount');
          }
          if (item.prop == 'saleAmount') {
            this.$set(item, 'sortable', 'saleAmount');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'saleAmount') {
          this.formInline.sortList = [
            {
              sort: 'asc',
              sortField: 'saleAmount',
            },
          ];
          this.search();
        }
        if (val.prop == 'memberCount') {
          this.formInline.sortList = [
            {
              sort: 'asc',
              sortField: 'memberCount',
            },
          ];
          this.search();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'saleAmount') {
          this.formInline.sortList = [
            {
              sort: 'desc',
              sortField: 'saleAmount',
            },
          ];
          this.search();
        }
        if (val.prop == 'memberCount') {
          this.formInline.sortList = [
            {
              sort: 'desc',
              sortField: 'memberCount',
            },
          ];
          this.search();
        }
      }
    },

    jobChange(val) {
      if (val == 5) {
        this.$confirm(
          '此操作会将原店长自动变更为店员，请谨慎操作！',
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            this.ruleForm.userType = '5';
          })
          .catch(() => {
            this.ruleForm.userType = '6';
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.el-form-item .el-select {
  width: 100%;
}
</style>
